<template>
  <div class="attack-sourcemap-area detail-card-area" v-loading="loading">
    <div class="card-title">
      <h3>攻击源地域分布</h3>
      <ul class="switch-box">
        <li :class="switchActiveVal===1?'active':''" @click.stop="switchActiveClick(1)">境内</li>
        <li :class="switchActiveVal===2?'active':''" @click.stop="switchActiveClick(2)">境外</li>
      </ul>
    </div>
    <div style="display: flex">
      <div class="map-chart" ref="mapChart"></div>
      <div class="ranking-area">
        <ul class="ranking-header">
          <li>排名</li>
          <li>地区</li>
          <li>数量</li>
          <li>占比</li>
        </ul>
        <ul class="ranking-content">
          <li v-for="(item, index) in mapData" :key="index" class="ranking-item">
            <div class="num">{{index + 1}}</div>
            <div class="info">
              <span>{{ item.name }}</span>
              <span>{{ item.value }}</span>
              <span>{{ item.percent }}%</span>
              <div class="outer">
                <div class="inner" :style="{ width: `${item.percent}%` }"></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
const chinaData = [
  {
    "attackSource": "西藏",
    "eventNum": 2
  },
  {
    "attackSource": "四川",
    "eventNum": 2
  },
  {
    "attackSource": "湖南",
    "eventNum": 3
  },
  {
    "attackSource": "山东",
    "eventNum": 4
  },
  {
    "attackSource": "河北",
    "eventNum": 12
  },
  {
    "attackSource": "河南",
    "eventNum": 11
  },
  {
    "attackSource": "山西",
    "eventNum": 32
  },
  {
    "attackSource": "浙江",
    "eventNum": 23
  },
];
const worldData = [
  {
    "attackSource": "南非",
    "eventNum": 2
  },
  {
    "attackSource": "巴西",
    "eventNum": 2
  },
  {
    "attackSource": "埃及",
    "eventNum": 2
  },
  {
    "attackSource": "德国",
    "eventNum": 2
  },
  {
    "attackSource": "英国",
    "eventNum": 2
  },
  {
    "attackSource": "西班牙",
    "eventNum": 30
  },
  {
    "attackSource": "刚果民主共和国",
    "eventNum": 6
  }
];
import nameMap from './nameMap.js'
import  { orderBy } from 'lodash'
export default {
  name: "AttackSourceMap",
  data() {
    return {
      loading: true,
      // 选中境内还是境外
      switchActiveVal: 1,
      // 数据
      mapData: [],
    }
  },
  created() {
    this.getData();
  },
  methods: {
    // 切换
    switchActiveClick(val){
      if(val === this.switchActiveVal){
        return null;
      }
      this.loading = true;
      this.switchActiveVal = val;
      this.getData();
    },
    // 获取数据
    getData(){
      this.mapData.length = 0;
      new Promise((resolve)=>{
        setTimeout(()=>{
          this.switchActiveVal === 1 ? resolve(chinaData) : resolve(worldData);
        },1000);
      }).then((data) =>{
        this.loading = false;
        const total = (data || []).reduce((a, b) => {
          return a + b.eventNum;
        }, 0);
        for (const item of orderBy(data, ['eventNum'],['desc'])) {
          this.mapData.push({
            name: item.attackSource,
            value: item.eventNum,
            percent: ((item.eventNum / (total || 1)) * 100).toFixed(0),
          });
        }
        this.initChart();
      })
    },
    // 生成地图
    initChart(){
      let option = {
        tooltip: {
          trigger: "item",
          formatter: function (item) {
            if (item.data) {
              return `${item.data.name}: ${item.data.value || 0}, 占比：${item.data.percent}%`;
            }
            return item.name
          },
        },
        visualMap: {
          orient: "horizontal", // 显示方式-水平
          left: "center", // 距离容器左侧的位置-居中
          min: 0,
          max: 5,
          show: true,
          inRange: {
            color: ["#9FEA85", "#85DFEA", "#FFEB46", "#FFAE55", "#FF6755", "#C73F3F"],
            // color: ["#C73F3F"],
          },
        },
        series: [
          {
            name: "地图",
            type: "map",
            map: this.switchActiveVal === 1 ? 'china' : 'world',
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                areaColor: '#c3eae8' // 鼠标悬停时的颜色
              }
            },
            // top: this.sourceType == 1 ? "15%" : "8%",
            left: "center",
            itemStyle: {
              normal: {
                color: "#eaf1ff",
                areaColor: "#eaf1ff",
                borderColor: "#4f6ab3",
                borderWidth: 1,
              },
            },
            data: this.mapData,
            nameMap: nameMap,
          },
        ],
      };
      let chart = this.$echarts.init(this.$refs.mapChart);
      chart.setOption(option, true);
      chart.resize(true);
    }
  }
}
</script>

<style scoped lang="scss">
.attack-sourcemap-area.detail-card-area {
  width: 50%;
  height: 400px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .card-title {
    width: 100%;
    height: 45px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;

    > h3 {
      font-size: 16px;
      font-weight: bold;
    }

    .switch-box {
      display: flex;
      cursor: pointer;
      font-size: 14px;

      > li:first-of-type {
        margin-right: 10px;
      }
      .active {
        color: #436bd9;
        font-weight: bold;
      }
    }
  }

  .map-chart {
    flex: 1;
    height: 355px;
  }
  .ranking-area{
    flex:  0 0 300px;
    padding: 10px;
    font-size: 14px;
    .ranking-header {
      display: flex;
      height: 30px;
      align-items: center;
      color: #8e97aa;
      font-weight: bold;
      margin-bottom: 5px;
      > li {
        flex: 0 0 73.3px;
        &:first-of-type{
          flex: 0 0 60px;
          text-align: center;
        }
      }
    }
    .ranking-content{
      height: 300px;
      overflow-y: auto;
      .ranking-item {
        display: flex;
        height: 40px;
        margin-bottom: 20px;
        padding-left: 10px;
        .num{
          flex:  0 0 40px;
          text-align: center;
          line-height: 40px;
          font-size: 16px;
          background-color: rgba(248, 44, 44, .2);
          border: 2px solid rgba(248, 44, 44, .6);
          color: rgba(248, 44, 44, .6);
          font-weight: bold;
        }
        .info {
          padding: 5px 0 0 10px;
          > span {
            font-weight: bold;
            display: inline-block;
            vertical-align: top;
            width: 70px;
            padding-left: 5px;
            &:first-of-type{
              padding-left: 0;
            }
            &:last-of-type{
              color: #C73F3F;
            }
          }
          .outer {
            margin-top: 10px;
            width: 100%;
            height: 10px;
            border-radius: 5px;
            background: #e1e3ed;
            .inner{
              background: #C73F3F;
              height: inherit;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }
}
</style>